<template>
    <div>
        <van-empty
        v-if="this.form == null"
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="请先登录"
        />
        <div id="main" 
        v-else
        style="margin:25vh 0;width: 100vw; height: 50vh;"></div>
       

    </div>
</template>

<script>
import * as echarts from 'echarts';
import httpApi from '@/http';
export default {
    data() {
        return {
            form: {

                },
                user: '',
        }
    },
    methods: {
        tubiao(user, moviecount, dongmancount, dianshicount) {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: `${user}的用户收藏表`,
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '60%',
                        data: [
                            { value: moviecount, name: '电影' },
                            { value: dongmancount, name: '动漫' },
                            { value: dianshicount, name: '电视剧' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    },
    mounted() {
        this.form = this.$store.state.user
        console.log('显示当前状态是否有表单信息', this.form);
        if (this.form == null) {
            //提示用户先登录
            this.$toast.fail('登录后才有收藏详情展示')
            //显示empty页面提示
            //TODO
            
            return
        } else {
            let user = this.form.username
            let params = { user }
            httpApi.yinshiApi.query_collectCount(params).then(res => {
                console.log(res);
                var moviecount = res.data.moviecount
                var dongmancount = res.data.dongmancount
                var dianshicount = res.data.dianshicount
                this.tubiao(user, moviecount, dongmancount, dianshicount)
            })
        }

    }
}
</script>

<style lang="scss" scoped>
</style>